<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>留言板</title>
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.3.1.min.js"></script>
<script src="bs/js/bootstrap.min.js"></script>
</head>
<style>
.container {
	width: 1280px !important;
	max-width: none !important;
}

body {
	background-image: url("bs/image/kk.jpg");
}
</style>

<body>
	<div class="container">
		<div class="col-xs-12">
			<div style="text-align: center;">
				<h3>
					<span style="position: absolute; left: 18px; top: 30px"
						class="glyphicon glyphicon-envelope text-danger"></span>
				</h3>
				<h2 style="color: fuchsia; opacity: 0.4; font-family: '幼圆'">留言板</h2>
			</div>
			<a href="/index"
				style="position: absolute; right: 15px; top: 10px"><h3>首页</h3></a>
			<div style="position: relative; top: 10%">
				<c:if test="${!empty isSuccess}">
					<div class="alert alert-warning" role="alert">${isSuccess}</div>
				</c:if>
			</div>
			<c:forEach items="${message }" var="msg" varStatus="i">
				<!--彩色的效果。。。。-->
				<c:choose>
					<c:when test="${i.index == 0}">
						<div class="panel panel-default" style="position: relative;">
							<div class="panel-heading">
								<h3 class="panel-title">${msg.name }</h3>
							</div>
							<div class="panel-body">${msg.content }</div>
							<div style="position: absolute; right: 5px; bottom: 0px;">
								<fmt:formatDate value="${msg.msgDate}"
									pattern="yyyy-MM-dd HH:mm:ss" />
							</div>
						</div>
					</c:when>
					<c:when test="${i.index == 1}">
						<div class="panel panel-info" style="position: relative;">
							<div class="panel-heading">
								<h3 class="panel-title">${msg.name }</h3>
							</div>
							<div class="panel-body">${msg.content }</div>
							<div style="position: absolute; right: 5px; bottom: 0px;">
								<fmt:formatDate value="${msg.msgDate}"
									pattern="yyyy-MM-dd HH:mm:ss" />
							</div>
						</div>
					</c:when>
					<c:when test="${i.index == 2}">
						<div class="panel panel-success" style="position: relative;">
							<div class="panel-heading">
								<h3 class="panel-title">${msg.name }</h3>
							</div>
							<div class="panel-body">${msg.content }</div>
							<div style="position: absolute; right: 5px; bottom: 0px;">
								<fmt:formatDate value="${msg.msgDate}"
									pattern="yyyy-MM-dd HH:mm:ss" />
							</div>
						</div>
					</c:when>
					<c:when test="${i.index == 3}">
						<div class="panel panel-danger" style="position: relative;">
							<div class="panel-heading">
								<h3 class="panel-title">${msg.name }</h3>
							</div>
							<div class="panel-body">${msg.content }</div>
							<div style="position: absolute; right: 5px; bottom: 0px;">
								<fmt:formatDate value="${msg.msgDate}"
									pattern="yyyy-MM-dd HH:mm:ss" />
							</div>
						</div>
					</c:when>
					<c:when test="${i.index == 4}">
						<div class="panel panel-warning" style="position: relative;">
							<div class="panel-heading">
								<h3 class="panel-title">${msg.name }</h3>
							</div>
							<div class="panel-body">${msg.content }</div>
							<div style="position: absolute; right: 5px; bottom: 0px;">
								<fmt:formatDate value="${msg.msgDate}"
									pattern="yyyy-MM-dd HH:mm:ss" />
							</div>
						</div>
					</c:when>
				</c:choose>
			</c:forEach>
			<!--分页条-->
			<nav aria-label="Page navigation">
				<ul class="pagination" style="margin-left: 43%; margin-top: 0px">
					<!--把后台传来的 查询条件 取出来 拼在后面-->
					<li><a href="/guestBook?page=${pageInfo.prePage }"
						aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
					</a></li>
					<c:forEach begin="1" step="1" end="${pageInfo.pages }" var="i">
						<li class="${i eq pageInfo.pageNum ? 'active':''}"><a
							href="/guestBook?page=${i }">${i }</a></li>
					</c:forEach>
					<li><a href="/guestBook?page=${pageInfo.nextPage}"
						aria-label="Next"> <span aria-hidden="true">&raquo;</span>
					</a></li>
				</ul>
				<div
					style="font-weight: 700; font-family: cursive; margin-left: 93%; margin-top: -50px"
					class="text-warning">Total：${pageInfo.total }</div>
			</nav>
			<!--  -->
			<button type="button" class="btn btn-primary" data-toggle="modal"
				data-target="#exampleModal" style="margin-left: 93%">留言</button>
			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
				aria-labelledby="exampleModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<h4 class="modal-title" id="exampleModalLabel">朕要留言</h4>
						</div>
						<div class="modal-body">
							<form action="/write" method="post"
								enctype="application/x-www-form-urlencoded">
								<!--隐藏表单存放口令-->
								<input type="hidden" name="tokenInform" value="${tokenInform }">
								<div class="form-group has-success has-feedback">
									<label class="control-label" for="inputSuccess2">昵称 </label> <input
										type="text" class="form-control" id="inputSuccess2"
										aria-describedby="inputSuccess2Status" required="required"
										name="name" maxlength="10"> <span
										class="glyphicon  glyphicon-user form-control-feedback"
										aria-hidden="true"></span> <span id="inputSuccess2Status"
										class="sr-only">(success)</span>
								</div>
								<div class="form-group has-warning has-feedback">
									<label class="control-label" for="inputWarning2">QQ </label> <input
										type="text" class="form-control" id="inputWarning2"
										aria-describedby="inputWarning2Status"
										placeholder="（选填）方便我们联系喔~" name="link" maxlength="11">
									<span
										class="glyphicon glyphicon-warning-sign form-control-feedback"
										aria-hidden="true"></span> <span id="inputWarning2Status"
										class="sr-only">(warning)</span>
								</div>
								<div class="form-group has-error has-feedback">
									<label class="control-label" for="inputError2">留言内容</label>
									<textarea class="form-control" required="required"
										placeholder="说点什么吧~" name="letter" maxlength="900" rows="9"></textarea>
									<span class="glyphicon glyphicon-comment form-control-feedback"
										aria-hidden="true"></span> <span id="inputError2Status"
										class="sr-only">(error)</span>
								</div>
								<div class="form-group">
									<input type="submit" class="btn btn-danger" value="OK">
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<!--  -->
			
		</div>
</body>
</html>